<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="130px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="节假日模板名称：">
                  <el-input v-model="from.holidaysTemplateName" placeholder="请输入节假日模板名称" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="节假日模板编号：">
                  <el-input v-model="from.holidaysTemplateNo" placeholder="请输入节假日模板编号" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="是否默认模板：">
                  <el-select v-model="from.isDefault" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="是"></el-option>
                    <el-option :value="2" label="否"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="from.status" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="正常"></el-option>
                    <el-option :value="2" label="停用"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" icon="el-icon-search"  type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" icon="el-icon-circle-plus-outline"  type="primary" @click="add()">新增</el-button>
          <el-button class="mr10" size="small" icon="el-icon-delete"  type="danger" @click="allDel()">删除</el-button>
          <el-button class="mr10" size="small" icon="el-icon-top"  @click="exportTable()">导出表格</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="holidaysTemplateName" label="节假日模板名称" min-width="100" />
        <el-table-column prop="holidaysTemplateNo" label="节假日模板编号" min-width="100" />
        <el-table-column label="周期" min-width="250">
          <template slot-scope="scope">
            <div><el-checkbox disabled v-model="scope.row.monday" :true-label="1" :false-label="2">周一</el-checkbox>
              <el-checkbox disabled v-model="scope.row.tuesday" :true-label="1" :false-label="2">周二</el-checkbox>
              <el-checkbox disabled v-model="scope.row.wednesday" :true-label="1" :false-label="2">周三</el-checkbox>
              <el-checkbox disabled v-model="scope.row.thursday" :true-label="1" :false-label="2">周四</el-checkbox>
            </div>
            <div><el-checkbox disabled v-model="scope.row.friday" :true-label="1" :false-label="2">周五</el-checkbox>
              <el-checkbox disabled v-model="scope.row.saturday" :true-label="1" :false-label="2">周六</el-checkbox>
              <el-checkbox disabled v-model="scope.row.sunday" :true-label="1" :false-label="2">周日</el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="isDefault" label="是否默认模板" min-width="100">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.isDefault == 1">是</el-button>
            <el-button size="mini" v-if="scope.row.isDefault == 2">否</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="80">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.status == 1">正常</el-button>
            <el-button size="mini" v-if="scope.row.status == 2">停用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" min-width="150" />
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetails(scope.row)">节假日详情</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <el-dialog :visible.sync="visible" width="640px">
      <el-table border :data="holidaysTemplateDtlRequests" height="250" border style="width: 100%">
        <el-table-column label="节假日日期" width="200">
          <template slot-scope="scope">
            <el-date-picker style="width: 100%;" disabled v-model="scope.row.holidaysDate" type="date"
              value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="节假日类型" width="200">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.holidaysType">
              <el-radio disabled :label="1">节假日</el-radio>
              <el-radio disabled :label="2">开盘</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="200">
          <template slot-scope="scope">
            <el-input disabled type="textarea" v-model="scope.row.remark"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :title="ruleForm.id?'编辑':'新增'" :visible.sync="dialogVisible" width="950px"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="150px">
        <el-form-item label="节假日模板名称：" prop="holidaysTemplateName">
          <el-input v-model="ruleForm.holidaysTemplateName"></el-input>
        </el-form-item>
        <el-form-item label="节假日模板编号：" prop="holidaysTemplateNo">
          <el-input v-model="ruleForm.holidaysTemplateNo"></el-input>
        </el-form-item>
        <el-form-item label="节假日设置：" prop="holidaysTemplateDtlRequests">
          <el-table border :data="ruleForm.holidaysTemplateDtlRequests" height="250" border style="width: 100%">
            <el-table-column label="节假日日期" width="200">
              <template slot-scope="scope">
                <el-date-picker style="width: 100%;" v-model="scope.row.holidaysDate" type="date"
                  value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="节假日类型" width="200">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.holidaysType">
                  <el-radio :label="1">节假日</el-radio>
                  <el-radio :label="2">开盘</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="描述" width="200">
              <template slot-scope="scope">
                <el-input type="textarea" v-model="scope.row.remark"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="159">
              <template slot-scope="scope">
                <el-button class="mr" size="mini" type="danger" @click="holidaysDel(scope.$index, scope.row)">删除
                </el-button>
                <el-button v-if="scope.$index == 0" class="mr" size="mini" type="success"
                  @click="holidaysAdd(scope.$index, scope.row)">添加
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="周期：">
          <el-checkbox v-model="ruleForm.monday" :true-label="1" :false-label="2">周一</el-checkbox>
          <el-checkbox v-model="ruleForm.tuesday" :true-label="1" :false-label="2">周二</el-checkbox>
          <el-checkbox v-model="ruleForm.wednesday" :true-label="1" :false-label="2">周三</el-checkbox>
          <el-checkbox v-model="ruleForm.thursday" :true-label="1" :false-label="2">周四</el-checkbox>
          <el-checkbox v-model="ruleForm.friday" :true-label="1" :false-label="2">周五</el-checkbox>
          <el-checkbox v-model="ruleForm.saturday" :true-label="1" :false-label="2">周六</el-checkbox>
          <el-checkbox v-model="ruleForm.sunday" :true-label="1" :false-label="2">周日</el-checkbox>
        </el-form-item>
        <el-form-item label="是否默认模板：">
          <el-radio-group v-model="ruleForm.isDefault">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态：">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    holidaystemplateList,
    holidaystemplateSave,
    holidaystemplateInfo,
    holidaystemplateUpdate,
    holidaystemplateDelete,
    holidaystemplateExport
  } from '@/api/agent'
  export default {
    name: 'holidaystemplate',
    data() {
      return {
        labelPosition: 'right',
        from: {
          holidaysTemplateName: '',
          holidaysTemplateNo: '',
          isDefault: '',
          status: 1,
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        selection: [],
        dialogVisible: false,
        visible: false,
        holidaysTemplateDtlRequests: [],
        ruleForm: {
          id: '',
          holidaysTemplateName: '',
          holidaysTemplateNo: '',
          holidaysTemplateDtlRequests: [{
            holidaysDate: '',
            holidaysType: '',
            remark: ''
          }],
          monday: 2,
          tuesday: 2,
          wednesday: 2,
          thursday: 2,
          friday: 2,
          saturday: 2,
          sunday: 2,
          isDefault: '',
          status: 1,
          remark: '',
        },
        rules: {
          holidaysTemplateName: [{
            required: true,
            message: '请填写节假日模板名称',
            trigger: 'blur'
          }],
          holidaysTemplateNo: [{
            required: true,
            message: '请填写节假日模板编号',
            trigger: 'blur'
          }],
        },
      }
    },
    mounted() {
      this.getlist()
    },
    methods: {
      search() {
        console.log(this.from)
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      reset() {
        this.from = {
          holidaysTemplateName: '',
          holidaysTemplateNo: '',
          isDefault: '',
          status: 1,
          page: 1,
          limit: 15,
        }
        this.getlist()
      },
      getlist() {
        this.loading = true
        holidaystemplateList(this.from).then(res => {
          console.log(res)
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      add() {
        this.ruleForm = {
          id: '',
          holidaysTemplateName: '',
          holidaysTemplateNo: '',
          holidaysTemplateDtlRequests: [{
            holidaysDate: '',
            holidaysType: '',
            remark: ''
          }],
          monday: 2,
          tuesday: 2,
          wednesday: 2,
          thursday: 2,
          friday: 2,
          saturday: 2,
          sunday: 2,
          isDefault: '',
          status: 1,
          remark: '',
        }
        this.dialogVisible = true
      },
      close() {
        this.ruleForm = {
          id: '',
          holidaysTemplateName: '',
          holidaysTemplateNo: '',
          holidaysTemplateDtlRequests: [{
            holidaysDate: '',
            holidaysType: '',
            remark: ''
          }],
          monday: 2,
          tuesday: 2,
          wednesday: 2,
          thursday: 2,
          friday: 2,
          saturday: 2,
          sunday: 2,
          isDefault: '',
          status: 1,
          remark: '',
        }
        this.dialogVisible = false
      },
      holidaysDel(index, row) {
        console.log(index, row)
        if (this.ruleForm.holidaysTemplateDtlRequests.length > 1) {
          this.ruleForm.holidaysTemplateDtlRequests.splice(index, 1)
        } else {
          this.$message.error('不能继续删除')
        }
      },
      holidaysAdd(index, row) {
        console.log(index, row)
        this.ruleForm.holidaysTemplateDtlRequests.push({
          holidaysDate: '',
          holidaysType: '',
          remark: ''
        })
      },
      submit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              console.log('编辑', this.ruleForm)
              holidaystemplateUpdate(this.ruleForm).then(res => {
                console.log(res)
                this.close()
                this.$message.success('编辑成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            } else {
              console.log('新增', this.ruleForm)
              let data = {
                holidaysTemplateName: this.ruleForm.holidaysTemplateName,
                holidaysTemplateNo: this.ruleForm.holidaysTemplateNo,
                holidaysTemplateDtlRequests: this.ruleForm.holidaysTemplateDtlRequests,
                monday: this.ruleForm.monday,
                tuesday: this.ruleForm.tuesday,
                wednesday: this.ruleForm.wednesday,
                thursday: this.ruleForm.thursday,
                friday: this.ruleForm.friday,
                saturday: this.ruleForm.saturday,
                sunday: this.ruleForm.sunday,
                isDefault: this.ruleForm.isDefault,
                status: this.ruleForm.status,
                remark: this.ruleForm.remark,
              }
              holidaystemplateSave(data).then(res => {
                console.log(res)
                this.close()
                this.$message.success('新增成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            }
          } else {
            this.$message.error('请填写完整信息')
          }
        });
      },
      // 选择
      onSelectTab(selection) {
        this.selection = []
        selection.forEach(item => {
          this.selection.push(item.id)
        })
        console.log(this.selection)
      },
      allDel() {
        if (this.selection.length == 0) {
          return this.$message.error('至少选择一项')
        }
        console.log(this.selection)
        this.$confirm('确认删除？')
          .then(_ => {
            holidaystemplateDelete(this.selection).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      exportTable() {
        holidaystemplateExport(this.from).then(res => {
          console.log('导出表格', res)
          window.open(res.filename);
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleDetails(row) {
        holidaystemplateInfo(row.id).then(res => {
          console.log('详情', res)
          this.holidaysTemplateDtlRequests = res.holidaysTemplateDtlRequests
          this.visible = true
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleEdit(row) {
        console.log('编辑', row)
        holidaystemplateInfo(row.id).then(res => {
          console.log('详情', res)
          this.ruleForm = {
            id: res.id,
            holidaysTemplateName: res.holidaysTemplateName,
            holidaysTemplateNo: res.holidaysTemplateNo,
            holidaysTemplateDtlRequests: res.holidaysTemplateDtlRequests || [{
              holidaysDate: '',
              holidaysType: '',
              remark: ''
            }],
            monday: res.monday,
            tuesday: res.tuesday,
            wednesday: res.wednesday,
            thursday: res.thursday,
            friday: res.friday,
            saturday: res.saturday,
            sunday: res.sunday,
            isDefault: Number(res.isDefault),
            status: Number(res.status),
            remark: res.remark,
          }
          this.dialogVisible = true
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleDel(row) {
        this.$confirm('确认删除？')
          .then(_ => {
            console.log('删除', row)
            holidaystemplateDelete([row.id]).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    }
  }
</script>

<style scoped lang="scss">
  .btn_bt {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
  }
</style>
